import { useRouter } from '@tarojs/taro';
import './index.scss'
import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import { STATUS, courseInfo } from '../../configProvider';
import CourseCard from '../../components/Card/CourseCard';
import { Button, Picker, View, Text, Input } from '@tarojs/components';
const StartCheck = () => {
  const router = useRouter();
  const { courseId } = router.params;
  const [course, setCourse] = useState<courseInfo>();
  const [checkMethod, setCheckMethod] = useState('');
  const [verifyCode, setVerifyCode] = useState('');
  useEffect(() => {
    if (!courseId) {
      console.log('courseId is empty');
      return;
    }

    console.log(courseId)
    Taro.cloud.callFunction({
      name: 'getCourse',
      data: {
        courseId: courseId,
      },
    }).then((res: any) => {
      console.log('queryCourse success', res.result.data);
      setCourse(res.result.data);
    }).catch((err) => {
      console.log('queryCourse fail', err);
    });
  }, [])

  const newCheck = () => {
    if (!checkMethod) {
      Taro.showToast({
        title: '请选择点名方式',
        icon: 'none',
        duration: 1000
      })
      return;
    } else if (checkMethod === '验证码') {
      if (!verifyCode) {
        Taro.showToast({
          title: '请填写验证码',
          icon: 'none',
          duration: 1000
        })
        return;
      } else {
        submitNewCheck(courseId, checkMethod, verifyCode, null);
      }
    } else if (checkMethod === 'GPS定位') {
      Taro.getLocation({
        type: 'wgs84',
        success: function (res) {
          console.log(res)
          submitNewCheck(courseId, checkMethod, verifyCode, res);
        }
      })
    }

  }
  const submitNewCheck = (i?: string, m?: string, vc?: string, loc?: any) => {
    Taro.cloud.callFunction({
      name: 'changeCourseState',
      data: {
        _id: i,
        action: 'start',
        method: m,
        verifyCode: vc,
        location: loc
      },
    }).then((res) => {
      console.log('changeCourseState', res);
      Taro.showToast({
        title: '开启成功',
        icon: 'success',
        duration: 1000,
      }).then(() => {
        setTimeout(() => {
          Taro.reLaunch({ url: '../index/index' });
        }, 1000);
      });
    }).catch((err) => {
      console.log('fail to call changeCourseState', err);
    });
  }
  return <>
    {course && <CourseCard name={course.courseName} startTime={course.startTime}
      endTime={course.endTime} weekday={course.weekday} teacher={course.teacher}
      status={STATUS.TEACHER} startDate={course.startDate} endDate={course.endDate} />
    }
    <View className="common-card input-container">
      <Text>点名方式</Text>
      <Picker range={['验证码', 'GPS定位']} onChange={(e: any) => { console.log(e.target.value); setCheckMethod(['验证码', 'GPS定位'][e.target.value]) }}>
        <Text>{checkMethod ? checkMethod : '请选择点名方式'}</Text>
      </Picker>
    </View>
    {checkMethod === '验证码' && <View className="common-card input-container">
      <Text>验证码</Text>
      <Input value={verifyCode} className="input" onInput={(e: any) => { setVerifyCode(e.target.value) }} />
    </View>}
    <Button className='common-button' onClick={newCheck}>开启点名</Button>
  </>
}
export default StartCheck;
